<template>
  <el-dialog :modelValue="visiable" title="控制点" width="800" @close="emit('closed')">
    <!-- search -->
    <div class="flex mb-3 justify-between">
      <!-- search -->
      <div>
        <el-input
          v-model="search"
          placeholder="请输入区段名称"
          style="width: 240px"
          clearable
          class="mr-2"
          @input="searchChange" />
        <el-select
          v-model="searchAcrossName"
          style="width: 150px"
          placeholder="请选择类型"
          clearable
          @change="searchChange">
          <el-option v-for="item in acrossNameOptions" :key="item.value" :label="item.value" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <!-- button -->
      <div>
        <el-button type="primary" size="default" @click="">更新</el-button>
      </div>
    </div>
    <!-- 表格 -->
    <el-table :data="lst_across?.data" border center>
      <el-table-column type="expand">
        <template #default="props">
          <el-descriptions title="" class="mx-4 my-1" border :column="2">
            <el-descriptions-item>
              <!-- label -->
              <template #label>
                <div class="flex items-center gap-1">
                  <HorizontalTidyUp theme="outline" size="16" fill="#95a5a6" />
                  <span>水平张力</span>
                </div>
              </template>

              <el-tag size="small">{{ Math.round(props.row.Hi) }}</el-tag>
              <span class="text-xs ml-1">kN</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <!-- label -->
              <template #label>
                <div class="flex items-center gap-1">
                  <VerticalTidyUp theme="outline" size="16" fill="#95a5a6" />
                  <span>平视弧垂</span>
                </div>
              </template>
              <el-tag size="small">{{ Math.round(props.row.Fi) }}</el-tag>
              <span class="text-xs ml-1">m</span>
            </el-descriptions-item>
            <el-descriptions-item>
              <!-- label -->
              <template #label>
                <div class="flex items-center gap-1">
                  <PullDoor theme="outline" size="16" fill="#95a5a6" />
                  <span>出口张力</span>
                </div>
              </template>
              <el-tag size="small">{{ Math.round(props.row.Ti) }}</el-tag>
              <span class="text-xs ml-1">kN</span>
            </el-descriptions-item>
          </el-descriptions>
        </template>
      </el-table-column>
      <!-- 是否为最终控制点 -->
      <el-table-column label="" width="50" algin="center">
        <template #header>
          <div class="flex justify-center">
            <Star theme="filled" size="15" fill="#95a5a6" />
          </div>
        </template>
        <template #default="scope">
          <div class="flex justify-center">
            <el-tooltip content="最终控制点" placement="top" effect="light" v-if="scope.row.finalControl">
              <Star
                :theme="scope.row.finalControl ? 'filled' : 'outline'"
                size="15"
                :fill="scope.row.finalControl ? '#d35400' : '#95a5a6'" />
            </el-tooltip>
            <Star v-if="!scope.row.finalControl" theme="outline" size="15" fill="#95a5a6" />
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column type="index" label="序号" width="65" align="center" /> -->
      <el-table-column label="区段名称" width="150">
        <template #default="scope">
          <div class="flex items-center gap-1">
            <Clue theme="outline" size="15" class="text-[#27ae60]" />
            <span class="text-sm">{{ scope.row.btName }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="控制点名称">
        <template #default="scope">
          <div class="flex gap-1 items-center">
            <el-tag>
              <FenceOne theme="outline" size="14" class="text-[#7f8c8d]" v-if="scope.row.acrossName.includes('网')" />
              <LocalTwo theme="outline" size="14" class="text-[#7f8c8d]" v-if="!scope.row.acrossName.includes('网')" />
            </el-tag>
            <span class="text-sm">{{ scope.row.acrossName }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column property="acrossX" label="X坐标" align="center" width="80">
        <template #default="scope">
          <div class="flex items-center gap-1 justify-center">
            <Ruler theme="outline" size="14" fill="#EE5A24" />
            <span class="text-sm">{{ scope.row.acrossX }}</span>
            <span class="text-xs text-gray-400">m</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="Y坐标" align="center" width="80">
        <template #default="scope">
          <div class="flex items-center gap-1 justify-center">
            <Ruler theme="outline" size="14" fill="#EE5A24" />
            <span class="text-sm">{{ scope.row.acrossY }}</span>
            <span class="text-xs text-gray-400">m</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column property="controlHeight" label="控制高度" align="center" width="90">
        <template #default="scope">
          <div class="flex items-center gap-1 justify-center">
            <Ruler theme="outline" size="14" fill="#EE5A24" />
            <span class="text-sm">{{ scope.row.controlHeight }}</span>
            <span class="text-xs text-gray-400">m</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" min-width="50" align="center">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="edit(scope.row)">
            <FileEditingOne theme="outline" size="16" fill="#34495e" />
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="">
      <el-pagination
        background
        layout="prev, pager, next, total"
        v-model:current-page="currentPage"
        :total="lst_across?.meta.total"
        class="mt-5"
        @current-change="currentChange" />
    </div>
  </el-dialog>

  <DialogAcrossEdit :visiable="acrossEditVisiable" @closed="acrossEditClose" :selectAcross="selectAcross!" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import {
  Clue,
  FenceOne,
  FileEditingOne,
  HorizontalTidyUp,
  LocalTwo,
  PullDoor,
  Ruler,
  Star,
  VerticalTidyUp,
} from '@icon-park/vue-next'
import useAcross from '@/composables/useAcross'
import DialogAcrossEdit from '@/components/Dialog/DialogAcrossEdit.vue'
import { acrossModel } from '@/types/model'
const prop = defineProps(['visiable', 'sectionId'])
const emit = defineEmits(['closed'])
const search = ref('')
const searchAcrossName = ref('')
const currentPage = ref(1)
const acrossNameOptions = ref<{ value: string }[]>([])
const acrossEditVisiable = ref(false)
const selectAcross = ref<acrossModel>()

const { lst_across, all: allAcross } = useAcross()

const searchChange = async () => {
  await allAcross({
    sectionId: prop.sectionId,
    search: search.value,
    page: currentPage.value,
    searchAcrossName: searchAcrossName.value || '',
  })
}

const currentChange = async () => {
  await allAcross({
    sectionId: prop.sectionId,
    search: search.value,
    page: currentPage.value,
    searchAcrossName: searchAcrossName.value || '',
  })
}

const getAllAcrossName = async () => {
  await allAcross({ sectionId: prop.sectionId })
  const set = new Set<string>()
  lst_across.value?.data.map((ac) => set.add(ac.acrossName))
  for (const value of set) {
    acrossNameOptions.value.push({
      value,
    })
  }
}

const edit = (data: acrossModel) => {
  acrossEditVisiable.value = true
  selectAcross.value = data
}

const acrossEditClose = () => {
  acrossEditVisiable.value = false
}

allAcross({ sectionId: prop.sectionId, search: search.value, page: 1, searchAcrossName: searchAcrossName.value || '' })
getAllAcrossName()
</script>
